import { CdkDrag } from '@angular/cdk/drag-drop';
import { Component, OnDestroy, OnInit, SimpleChanges, ViewChild } from '@angular/core';
import { AutopartsService } from '@core/services/autoparts/autoparts.service';
import { Subscription } from 'rxjs';
import { AutopartsViewService } from '@core/services/autoparts/autoparts.view.service';
import {HttpClient} from "@angular/common/http";

@Component({
  templateUrl: './epc-image-content.component.html',
  selector: 'epc-image-content',
  styleUrls: ['./epc-image-content.component.scss'],
})

export class EpcImageContentComponent implements OnInit, OnDestroy {

  @ViewChild(CdkDrag, { static: true }) cdkDrag: CdkDrag;

  images = [];

  currentImg: string = '';

  style = {};
  zoom:number = 1;


  private subscription: Subscription;

  constructor(
    private autopartsService: AutopartsService,
    private  autopartsViewService: AutopartsViewService,
    private http: HttpClient
  ) {

  }

  ngOnInit(): void {
    this.subscription = this.autopartsViewService.imgSelectChange$.subscribe((data:any) => {
      this.reset();
      if(data && data.imageUrls) {
        this.images = data.imageUrls;

        this.getImageUrl(data)
      } else {
        this.images = [];
        this.currentImg = '';
      }
    })
  }

  getImageUrl(item){
    if (!(item.imageUrls && item.imageUrls[0])) return;
    if (!/\.tif$/.test(item.imageUrls[0]) && !/\.TIF$/.test(item.imageUrls[0])) {
      item.realSrc = item.imageUrls[0];
      this.currentImg = item.realSrc;
      return;
    }
    const tempList = [];
    // tslint:disable-next-line:prefer-for-of
    for (let i = 0, len = item.imageUrls.length; i < len; i++) {
      this.http.request("GET", item.imageUrls[i], {
        responseType:'arraybuffer',
      }).subscribe(response => {
        let tiff = new Tiff({buffer: response});
        tempList.push(tiff.toDataURL()) ;
      });
    }
    this.images = tempList;
    this.http.request("GET", item.imageUrls[0], {
      responseType:'arraybuffer',
    }).subscribe(response => {
      let tiff = new Tiff({buffer: response});
      item.realSrc = tiff.toDataURL();
      this.currentImg = item.realSrc;
    });
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }

  reset() {
    this.zoom = 1;
    this.cdkDrag.reset();
    this.cdkDrag.getRootElement().style.transform = `translate3d(0px, 0px, 0px) scale(${this.zoom})`;
  }

  // 切换当前显示的图片
  toggleImg(image) {
    this.currentImg = image;
    this.reset();
  }


  zoomOut() {
    this.zoom += 0.1;
    if( this.zoom <= 0.3 ) { this.zoom = 0.3; }
    const pos = this.cdkDrag.getFreeDragPosition();
    this.cdkDrag.getRootElement().style.transform = `translate3d(${pos.x}px, ${pos.y}px, 0px) scale(${this.zoom})`;
  }

  zoomIn() {
    this.zoom -= 0.1;
    if( this.zoom <= 0.3 ) { this.zoom = 0.3; }
    const pos = this.cdkDrag.getFreeDragPosition();
    this.cdkDrag.getRootElement().style.transform = `translate3d(${pos.x}px, ${pos.y}px, 0px) scale(${this.zoom})`;
  }

  dragStart() {
    const pos = this.cdkDrag.getFreeDragPosition();
    this.cdkDrag.getRootElement().style.transform = `translate3d(${pos.x}px, ${pos.y}px, 0px) scale(${this.zoom})`;
  }

  zoomInAndOut($evnet) {
    const target: HTMLImageElement = $evnet.target;
    const pos = this.cdkDrag.getFreeDragPosition();

    this.zoom += $evnet.wheelDelta / 12 / 100;
    if( this.zoom <= 0.3 ) { this.zoom = 0.3; }
    // this.style = {transform:`scale(${zoomIn})`}
    target.style.transform = `translate3d(${pos.x}px, ${pos.y}px, 0px) scale(${this.zoom})`;
    return false;
  }
}
